<template>
  <div class="page add-employee">
    <StoreChoice
      ref="StoreChoice"
      :current="store"
      :multipleChoice="false"
      :hasTotal="false"
      v-on:listenToStoreSelect="getSelectStoreValue"
    />
    <awesome-picker
      ref="pickerAffiliation"
      :textTitle="pickerAffiliation.textTitle"
      colorTitle="#38ADFF"
      colorConfirm="#38ADFF"
      :data="pickerAffiliation.data"
      :anchor="pickerAffiliation.anchor"
      @confirm="handlePickerAffiliation"
    ></awesome-picker>
    <awesome-picker
      ref="pickerEmployeeLevel"
      :textTitle="pickerEmployeeLevel.textTitle"
      colorTitle="#38ADFF"
      colorConfirm="#38ADFF"
      :data="pickerEmployeeLevel.data"
      :anchor="pickerEmployeeLevel.anchor"
      @confirm="handlePickerEmployeeLevel"
    ></awesome-picker>
    <awesome-picker
      ref="pickerOnjobStatus"
      :textTitle="pickerOnjobStatus.textTitle"
      colorTitle="#38ADFF"
      colorConfirm="#38ADFF"
      :data="pickerOnjobStatus.data"
      :anchor="pickerOnjobStatus.anchor"
      @confirm="handlePickerOnjobStatus"
    ></awesome-picker>
    <awesome-picker
      ref="pickerRegion"
      :textTitle="pickerRegion.textTitle"
      colorTitle="#38ADFF"
      colorConfirm="#38ADFF"
      :data="pickerRegion.data"
      :anchor="pickerRegion.anchor"
      @confirm="handleRegion"
    ></awesome-picker>
    <div class="scroll-view">
      <customHeader :middleTitle="title" @leftCallBack="handleBack" />
      <div class="page-body" v-if="!readOnly">
        <ul class="mine-options">
          <li class="option-item">
            <span class="left">员工姓名</span>
            <div class="right">
              <inputClear
                type="text"
                warpClass="add-employee-input"
                v-model="param.employeeName"
                placeholder="请填写员工姓名"
                :maxlength="10"
                :max="10"
              />
            </div>
          </li>
          <li class="option-item">
            <span class="left">手机号码</span>
            <div class="right">
              <inputClear
                type="tel"
                v-if="!param.edit"
                warpClass="add-employee-input"
                v-model="param.employeeMobile"
                placeholder="请输入手机号"
                :maxlength="11"
                :max="11"
              />
              <span class="value" v-if="param.edit">{{
                param.employeeMobile
              }}</span>
            </div>
          </li>
          <li class="option-item">
            <span class="left">员工编号</span>
            <div class="right">
              <inputClear
                type="text"
                warpClass="add-employee-input"
                v-model="param.employeeCode"
                placeholder="请输入员工编号"
                :maxlength="20"
                :max="20"
              />
            </div>
          </li>
          <li class="option-item" v-if="param.edit">
            <van-popup
              v-model="shows2"
              round
              position="bottom"
              :style="{ height: '35%' }"
            >
              <div class="dbott">
                <p>{{ pickerOnjobStatus.textTitle }}</p>
              </div>
              <van-picker
                ref="pickerOnjobStatus"
                visible-item-count="3"
                :columns="pickerOnjobStatus.data"
                show-toolbar
                @confirm="handlePickerOnjobStatus"
                @cancel="onCancel"
                item-height="38px"
              >
              </van-picker>
            </van-popup>

            <span class="left">在职状态</span>
            <div
              class="right"
              @click="showPickerPickerOnjobStatus('pickerOnjobStatus')"
            >
              <span v-if="param.onjobStatus == '1'" class="value">在职</span>
              <span v-if="param.onjobStatus == '2'" class="value">离职</span>
              <span class="right-icon">
                <i class="zhk-list_rarrow"></i>
              </span>
            </div>
          </li>
        </ul>
        <ul class="mine-options">
          <li class="option-item" v-if="role == '1'">
            <van-popup
              v-model="showsPickerAffiliation"
              round
              position="bottom"
              :style="{ height: '35%' }"
            >
              <div class="dbott">
                <p>{{ pickerAffiliation.textTitle }}</p>
              </div>
              <van-picker
                ref="pickerAffiliation"
                visible-item-count="3"
                :columns="pickerAffiliation.data1"
                show-toolbar
                @confirm="handlePickerAffiliation"
                @cancel="onCancel"
                item-height="38px"
              >
              </van-picker>
            </van-popup>
            <span class="left">编制归属</span>

            <div
              class="right"
              v-if="!param.edit"
              @click="showPicker('pickerAffiliation')"
            >
              <span v-if="param.affiliation == '1'" class="value">总部</span>
              <span v-else-if="param.affiliation == '2'" class="value"
                >单门店</span
              >
              <span v-else-if="param.affiliation == '3'" class="value"
                >区域</span
              >
              <span class="right-icon">
                <i class="zhk-list_rarrow"></i>
              </span>
            </div>
            <span class="right" v-if="param.edit">
              <span v-if="param.affiliation == '1'" class="value">总部</span>
              <span v-else-if="param.affiliation == '2'" class="value"
                >单门店</span
              >
              <span v-else-if="param.affiliation == '3'" class="value"
                >区域</span
              >
            </span>
          </li>
          <li
            class="option-item"
            v-if="(role == '1' || role == '7') && param.affiliation == '2'"
          >
            <span class="left">所属门店</span>
            <div class="right" v-if="!param.shopId" @click="chooseShopTo">
              <span class="value">请选择所属门店</span>
              <span class="right-icon">
                <i class="zhk-list_rarrow"></i>
              </span>
            </div>
            <div class="right" v-if="param.shopId" @click="chooseShopTo">
              <span class="value">{{ param.shopName }}</span>
              <span class="right-icon">
                <i class="zhk-list_rarrow"></i>
              </span>
            </div>
          </li>
          <li
            class="option-item"
            v-if="role == '1' && param.affiliation == '3'"
          >
            <span class="left">所属区域</span>
            <div
              class="right"
              @click="showPicker('pickerRegion')"
              style="display: block"
            >
              <span class="value">{{
                param.regionName ? param.regionName : "请选择"
              }}</span>
              <span class="right-icon">
                <i class="zhk-list_rarrow"></i>
              </span>
              <div class="sub-text">
                若添加区域，请到“我的-区域管理“进行操作
              </div>
            </div>
          </li>
          <li class="option-item">
            <!-- <van-cell is-link @click="showPopup('pickerEmployeeLevel')"
              >展示弹出层</van-cell
            > -->

            <van-popup
              v-model="shows"
              round
              position="bottom"
              :style="{ height: '35%' }"
            >
              <div class="dbott">
                <p>{{ pickerEmployeeLevel.textTitle }}</p>
              </div>
              <van-picker
                ref="pickerEmployeeLevel"
                visible-item-count="3"
                :columns="pickerEmployeeLevel.data"
                show-toolbar
                @confirm="handlePickerEmployeeLevel"
                @cancel="onCancel"
                item-height="38px"
                :formatter="formatPickerItem"
              >
              </van-picker>
            </van-popup>
            <span class="left">员工角色</span>
            <div
              class="right"
              @click="fangPickerEmployeeLevel('pickerEmployeeLevel')"
            >
              <!-- <div class="right" @click="showPopup('pickerEmployeeLevel')"> -->
              <span v-if="param.employeeLevel == 2" class="value"
                >运营/市场</span
              >
              <span v-else-if="param.employeeLevel == 3" class="value"
                >财务</span
              >
              <span v-else-if="param.employeeLevel == 4" class="value"
                >店长</span
              >
              <span v-else-if="param.employeeLevel == 5" class="value"
                >服务员</span
              >
              <span v-else-if="param.employeeLevel == 6" class="value"
                >收银员</span
              >
              <span v-else-if="param.employeeLevel == 7" class="value"
                >区域经理</span
              >
              <span class="right-icon">
                <!-- <i class="zhk-list_rarrow"></i> -->
              </span>
            </div>
          </li>
        </ul>
        <div class="btn-wraps">
          <span
            class="btn"
            :class="{ disabled: disabledSubmit }"
            @click="submit"
            >{{ param.edit ? "确定" : "添加" }}</span
          >
        </div>
      </div>
      <div class="page-body" v-if="readOnly">
        <ul class="mine-options">
          <li class="option-item">
            <span class="left">员工姓名</span>
            <div class="right">
              <span class="value">{{ param.employeeName }}</span>
            </div>
          </li>
          <li class="option-item">
            <span class="left">手机号码</span>
            <div class="right">
              <span class="value">{{ param.employeeMobile }}</span>
            </div>
          </li>
          <li class="option-item">
            <span class="left">员工编号</span>
            <div class="right">
              <span class="value">{{ param.employeeCode }}</span>
            </div>
          </li>
          <li class="option-item" v-if="param.edit">
            <span class="left">在职状态</span>
            <div class="right">
              <span v-if="param.onjobStatus == '1'" class="value">在职</span>
              <span v-if="param.onjobStatus == '2'" class="value">离职</span>
            </div>
          </li>
        </ul>
        <ul class="mine-options">
          <li class="option-item">
            <span class="left">编制归属</span>
            <span class="right">
              <span v-if="param.affiliation == '1'" class="value">总部</span>
              <span v-else-if="param.affiliation == '2'" class="value"
                >单门店</span
              >
              <span v-else-if="param.affiliation == '3'" class="value"
                >区域</span
              >
            </span>
          </li>
          <li class="option-item" v-if="param.affiliation == '2'">
            <span class="left">所属门店</span>
            <div class="right" v-if="param.shopId">
              <span class="value">{{ param.shopName }}</span>
            </div>
          </li>
          <li class="option-item" v-if="param.affiliation == '3'">
            <span class="left">所属区域</span>
            <div class="right">
              <span class="value">{{ param.regionName }}</span>
            </div>
          </li>
          <li class="option-item">
            <span class="left">员工角色</span>
            <div class="right">
              <span v-if="param.employeeLevel == 2" class="value"
                >运营/市场</span
              >
              <span v-else-if="param.employeeLevel == 3" class="value"
                >财务</span
              >
              <span v-else-if="param.employeeLevel == 4" class="value"
                >店长</span
              >
              <span v-else-if="param.employeeLevel == 5" class="value"
                >服务员</span
              >
              <span v-else-if="param.employeeLevel == 6" class="value"
                >收银员</span
              >
              <span v-else-if="param.employeeLevel == 7" class="value"
                >区域经理</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import inputClear from "../../components/inputClear/inputClear";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);
import { Toast, MessageBox } from "mint-ui";

export default {
  name: "addEmployee",
  data() {
    return {
      userInfo: "",
      title: "添加员工",
      role: "1",
      store: [],

      shows: false,
      showsPickerAffiliation: false,
      shows2: false,
      readOnly: false,
      columns: [],
      param: {
        shopId: "",
        employeeLevel: "",
        employeeName: "",
        employeeCode: "",
        affiliation: "1",
        employeeMobile: "",
        onjobStatus: "1",
      },
      canSubmit: false,
      pickerAffiliation: {
        anchor: [],
        textTitle: "请选择编制归属",
        data: [{ value: "总部" }, { value: "单门店" }, { value: "区域" }],
        data1: ["总部", "单门店", "区域"],
        selected: { value: "总部" },
      },
      pickerEmployeeLevel: {
        anchor: [],
        textTitle: "请选择员工角色",
        data: [],
        selected: {},
      },
      pickerRegion: {
        anchor: [],
        textTitle: "请选择区域",
        data: [],
        selected: {},
      },
      pickerOnjobStatus: {
        anchor: [],
        textTitle: "请选择在职状态",
        data: [
          {
            value: "在职",
          },
          {
            value: "离职",
          },
        ],
        selected: {},
      },
    };
  },
  methods: {
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast("取消");
      if (this.shows) {
        this.shows = false;
      }
      if (this.showsPickerAffiliation) {
        this.showsPickerAffiliation = false;
      }
    },
    formatPickerItem(item) {
      return item.value;
    },
    init() {
      this.param.employeeMobile = this.param.mobile || "";
      this.param.employeeName = this.param.name || "";
      this.param.employeeCode = this.param.code || "";
      if (this.param.roleName && this.param.roleName !== "") {
        switch (this.param.roleName) {
          case "运营/市场":
            this.param.employeeLevel = "2";
            this.columns.push("运营/市场");

            break;
          case "财务":
            this.param.employeeLevel = "3";
            this.columns.push("财务");
            break;
          case "店长":
            this.param.employeeLevel = "4";
            break;
          case "服务员":
            this.param.employeeLevel = "5";
            break;
          case "收银员":
            this.param.employeeLevel = "6";
            break;
          case "区域经理":
            this.param.employeeLevel = "7";
            break;
          default:
            break;
        }
      }
      if (this.param.employeeLevel) {
        switch (this.param.employeeLevel) {
          case "2":
            this.pickerEmployeeLevel.selected = {
              value: "运营/市场",
            };
            break;
          case "3":
            this.pickerEmployeeLevel.selected = {
              value: "财务",
            };
            break;
          case "4":
            this.pickerEmployeeLevel.selected = {
              value: "店长",
            };
            break;
          case "5":
            this.pickerEmployeeLevel.selected = {
              value: "服务员",
            };
            break;
          case "6":
            this.pickerEmployeeLevel.selected = {
              value: "收银员",
            };
            break;
          case "7":
            this.pickerEmployeeLevel.selected = {
              value: "区域经理",
            };
            break;
          default:
            break;
        }
      }
      this.setEmployeeLevel();
      if (this.param.onjobStatus == "1") {
        this.pickerOnjobStatus.selected = { value: "在职" };
      } else if (this.param.onjobStatus == "2") {
        this.pickerOnjobStatus.selected = { value: "离职" };
      }
      this.store = [{ selectKey: this.param.shopId }];
      if (this.param.roleId == "7") {
        this.getRegionList();
      }
    },
    setEmployeeLevel() {
      if (this.role == "1") {
        if (this.param.affiliation == "1" && !this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "运营/市场",
            },
            {
              value: "财务",
            },
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "运营/市场",
            };
            this.param.employeeLevel = "2";
          }
        } else if (this.param.affiliation == "2" && !this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "店长",
            },
            {
              value: "服务员",
            },
            {
              value: "收银员",
            },
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "店长",
            };
            this.param.employeeLevel = "4";
          }
        } else if (this.param.affiliation == "3" && !this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "区域经理",
            },
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "区域经理",
            };
            this.param.employeeLevel = "7";
          }
        }
      } else if (this.role == "4" && !this.readOnly) {
        this.param.affiliation = "2";
        this.pickerEmployeeLevel.data = [
          {
            value: "服务员",
          },
          {
            value: "收银员",
          },
        ];
        if (!this.param.employeeLevel) {
          this.pickerEmployeeLevel.selected = {
            value: "服务员",
          };
          this.param.employeeLevel = "5";
        }
      } else if (this.role == "7" && !this.readOnly) {
        this.param.affiliation = "2";
        this.pickerEmployeeLevel.data = [
          {
            value: "店长",
          },
          {
            value: "服务员",
          },
          {
            value: "收银员",
          },
        ];
      }
    },
    showPicker(ref) {
      this.showsPickerAffiliation = true;
      // this.$refs[ref].show();
    },

    //给编辑页面pickerOnjobStatus中的data赋值，因ui组件原因，数据要处理成一维数组
    showPickerPickerOnjobStatus(ref) {
      this.shows2 = true;
      // this.$refs[ref].show();
      let val = [];
      let svg = [];

      if (this.$refs[ref].pickerData) {
        this.$refs[ref].pickerData.map((item) => {
          val.push(item.value);
        });
        this.pickerOnjobStatus.data = val;
      }

      if (this.pickerOnjobStatus.data[0].value) {
        this.pickerOnjobStatus.data.map((item) => {
          svg.push(item.value);
        });
        this.pickerOnjobStatus.data = svg;
      }
    },
    //给编辑页面pickerEmployeeLevel中的data赋值，因ui组件原因，数据要处理成一维数组
    fangPickerEmployeeLevel(ref) {
      this.shows = true;
      let val = [];
      let svg = [];

      if (this.$refs[ref].pickerData) {
        this.$refs[ref].pickerData.map((item) => {
          val.push(item.value);
        });
        this.pickerEmployeeLevel.data = val;
      }

      if (this.pickerEmployeeLevel.data[0].value) {
        this.pickerEmployeeLevel.data.map((item) => {
          svg.push(item.value);
        });
        this.pickerEmployeeLevel.data = svg;
      }
    },

    handlePickerAffiliation(name, index) {
      let v = [{ index: index, value: name }];

      this.pickerAffiliation.anchor = v;
      this.pickerAffiliation.selected.value = v[0].value;

      if (this.pickerAffiliation.selected.value == "总部") {
        this.param.affiliation = "1";
      } else if (this.pickerAffiliation.selected.value == "单门店") {
        this.param.affiliation = "2";
      } else if (this.pickerAffiliation.selected.value == "区域") {
        this.param.affiliation = "3";
        this.getRegionList();
        this.fangPickerEmployeeLevel("pickerAffiliation");
      }

      this.param.employeeLevel = "";
      if (this.role == "1") {
        (this.param.shopId = ""), (this.param.shopName = "");
        this.store = [{ selectKey: this.param.shopId }];
      }
      this.setEmployeeLevel();
      this.showsPickerAffiliation = false;
    },
    handlePickerEmployeeLevel(name, index) {
      let v = [{ index: index, value: name }];
      this.pickerEmployeeLevel.anchor = v;
      this.pickerEmployeeLevel.selected.value = v[0].value;

      switch (this.pickerEmployeeLevel.selected.value) {
        case "运营/市场":
          this.param.employeeLevel = "2";
          break;
        case "财务":
          this.param.employeeLevel = "3";
          break;
        case "店长":
          this.param.employeeLevel = "4";
          break;
        case "服务员":
          this.param.employeeLevel = "5";
          break;
        case "收银员":
          this.param.employeeLevel = "6";
          break;
        case "区域经理":
          this.param.employeeLevel = "7";
          break;
        default:
          break;
      }
      this.shows = false;
    },
    handlePickerOnjobStatus(index, name) {
      let v = [{ index: index, value: name }];
      this.pickerOnjobStatus.anchor = v;
      this.pickerOnjobStatus.selected.value = v[0].value;
      this.param.onjobStatus =
        this.pickerOnjobStatus.selected.value == "在职" ? "1" : "2";
      this.shows2 = false;
    },
    handleRegion(v) {
      this.pickerRegion.anchor = v;
      this.pickerRegion.selected.value = this.pickerRegion.data[v[0].index].id;
      this.param.regionId = this.pickerRegion.data[v[0].index].id;
      this.pickerRegion.selected.text = v[0].value;
      this.param.regionName = v[0].value;
    },
    chooseShopTo() {
      //显示选择门店
      this.$refs.StoreChoice.popupShow();
    },
    handleBack() {
      if (this.$refs.StoreChoice && this.$refs.StoreChoice.popupVisible) {
        this.$refs.StoreChoice.back();
      } else {
        this.$router.go(-1);
      }
    },
    getSelectStoreValue(value) {
      this.param.shopId = value[0].selectKey;
      this.param.shopName = value[0].selectName;
      this.store = [{ selectKey: this.param.shopId }];
    },
    submit() {
      if (!this.param.employeeName || !this.param.employeeMobile) {
        //Toast("请填写员工姓名");
        return;
      }
      if (!this.param.edit) {
        var phoneNumCheckRule = /^[1][0-9]{10}$/;
        if (
          this.param.employeeMobile &&
          !phoneNumCheckRule.test(this.param.employeeMobile)
        ) {
          Toast("请输入正确的手机号");
          return;
        }
      }
      if (this.param.employeeName.length > 10) {
        Toast("员工姓名不能超过10个字");
        return;
      }
      if (this.param.employeeCode.length > 20) {
        Toast("员工编号不能超过20个字");
        return;
      }
      var checkNameReg = /^[\u4e00-\u9fffa-zA-Z0-9]+$/;
      if (
        this.param.employeeName &&
        !checkNameReg.test(this.param.employeeName)
      ) {
        Toast("员工姓名不允许输入特殊字符");
        return;
      }
      if (this.param.onjobStatus == "") {
        Toast("请填写在职状态");
        return;
      }
      if (this.param.affiliation == undefined) {
        Toast("请选择所属编制");
        return;
      }
      if (this.param.affiliation == "2" && this.param.shopId == "") {
        Toast("请选择所属门店");
        return;
      }
      if (this.param.affiliation == "3" && !this.param.regionId) {
        Toast("请选择所属区域");
        return;
      }
      if (this.param.employeeLevel == "") {
        Toast("请选择员工角色");
        return;
      }
      if (this.param.edit) {
        this.ajax({
          type: "post",
          data: this.param,
          url: "/newapp/employee/update.do",
          controlLoading: true,
        })
          .then((res) => {
            if (res.success) {
              Toast("修改员工成功!");
              setTimeout(() => {
                this.$router.back();
              }, 3000);
            } else {
              Toast(res.msg);
            }
          })
          .catch((err) => {});
      } else {
        debugger;
        this.ajax({
          type: "post",
          data: this.param,
          url: "newapp/employee/add.do",
          controlLoading: true,
        })
          .then((res) => {
            if (res.success) {
              Toast(
                "员工创建成功!初始密码:手机后6位,为保障账号安全,请提醒员工及时修改"
              );
              setTimeout(() => {
                this.$router.back();
              }, 3000);
            } else {
              Toast(res.msg);
            }
          })
          .catch((err) => {});
      }
    },
    getEmployeeInfo() {
      this.ajax({
        type: "get",
        url: "/newapp/employee/info.do?employeeId=" + this.param.employeeId,
        controlLoading: true,
      })
        .then((res) => {
          if (res.success) {
            _.assignWith(this.param, res.resultObject);
            this.init();
          } else {
            Toast(res.msg);
          }
        })
        .catch((err) => {});
    },
    getRegionList() {
      if (this.pickerRegion.data.length > 0) {
        return;
      }
      this.ajax({
        type: "get",
        url: "/newapp/region/queryAllResion.do",
        controlLoading: false,
      })
        .then((res) => {
          if (res.success) {
            const data = res.resultObject;
            this.pickerRegion.data = this.pickerRegion.data.concat(
              CommonUtil.formatPickerData(data, "regionName", "regionId")
            );
            if (this.param.regionId) {
              this.pickerRegion.data.map((item, i) => {
                if (item.id == this.param.regionId) {
                  this.pickerRegion.anchor = [{ index: i }];
                }
              });
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch((err) => {});
    },
  },
  computed: {
    disabledSubmit() {
      if (this.param.employeeName && this.param.employeeMobile) {
        return false;
      } else {
        return true;
      }
    },
  },
  mounted() {
    _.assignWith(this.param, this.$route.query);
    if (this.param.edit) {
      this.title = "编辑员工";
      CommonUtil.getUserInfo().then((data) => {
        this.userInfo = data;
        if (data.role === "4") {
          this.param.shopId = data.yzShopId;
          this.param.shopName = data.shopName;
        }
        this.role = data.role;
        this.param.employeeId = this.param.accountId;
        this.getEmployeeInfo();
        if (data.role == this.param.roleId) {
          this.readOnly = true;
          this.title = "查看";
        } else {
          this.readOnly = false;
        }
      });
    } else {
      CommonUtil.getUserInfo().then((data) => {
        this.userInfo = data;
        if (data.role === "4") {
          this.param.shopId = data.yzShopId;
          this.param.shopName = data.shopName;
        }
        this.role = data.role;
        this.init();
      });
    }
  },
  components: {
    customHeader,
    StoreChoice,
    inputClear,
  },
};
</script>
<style lang='scss' scoped>
@import "employeeManage";
</style>
<style lang="scss">
@import "../../style/public";
.add-employee-input {
  text-align: right !important;
  @include remCalc(font-size, 28, !important);
}
.van-picker__confirm {
  position: fixed;
  bottom: pw(20);
  left: 0;
  right: 0;
  background-color: white; /* 调整为你的背景色 */

  width: pw(355);
  height: pw(44);
  border-radius: pw(10);
  background: linear-gradient(271.44deg, #f52222 0%, #d81212 100%);
  text-align: center;
  line-height: pw(44);
  border: 0.01px solid red;
  font-family: PingFang SC;
  font-size: pw(16);
  font-weight: 500;
  color: rgba(255, 255, 255, 1);

  letter-spacing: 0px;
  text-align: center;
  margin-left: pw(10);
}
.van-picker__cancel {
  height: pw(14);
  position: absolute;
  bottom: pw(20);

  right: 0;
}
.van-picker__toolbar {
  height: 14px;
  position: relative;
}
</style>
